<template>
    <View class="flex justify-between px-[30rpx] mt-[50rpx] bg-white">
        <View class="bg-white flex items-center">
            <View
                class="w-[120rpx] h-[120rpx] rounded-full bg-gradient-to-r from-blue-100 to-blue-200 flex items-center justify-center mr-[30rpx]">

                <IconFont name="thermometer" size="40" color="white" />

            </View>
            <View class="w-[150rpx]">
                <Text class="text-[28rpx] font-bold text-gray-800 block mb-[10rpx]">张山</Text>
                <Text class="text-[20rpx] text-gray-600 block">健康管家</Text>
            </View>
        </View>

        <View class="flex flex-col items-center w-[200rpx]">
            <View
                class="w-[100rpx] h-[80rpx] rounded-full bg-gradient-to-r from-green-400 to-green-500 flex items-center justify-center">
                <IconFont name="thermometer" size="24" color="white" />
            </View>
            <Text class="text-[24rpx] font-medium text-gray-800 mt-[20rpx]">呼叫中心</Text>
        </View>

        <View class="flex flex-col items-center w-[200rpx]">
            <View
                class="w-[100rpx] h-[80rpx] rounded-full bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center">
                <IconFont name="thermometer" size="24" color="white" />
            </View>
            <Text class="text-[24rpx] font-medium text-gray-800 mt-[20rpx]">历史记录</Text>
        </View>

        <View class="flex flex-col items-center w-[200rpx]">
            <View
                class="flex h-[80rpx] items-center justify-center">
                <text class="text-[42rpx] font-medium text-[#009900] mt-[20rpx]">
                    100<text class="text-[20rpx]">分</text>
                </text>
            </View>
            <Text class="text-[24rpx] font-medium text-gray-800 mt-[20rpx]">健康指数</Text>
        </View>
    </View>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import { ref } from 'vue'
</script>